.ScrollableShadows {
    --scrollable-shadows-offset-top: 0px;

    position: relative;
    display: flex;
    overflow: hidden;

    &::before,
    &::after {
        position: absolute;
        top: var(--scrollable-shadows-offset-top);
        left: 0;
        z-index: 5; // Bumped from 1 because in new scene layout we use scrollable shadows in around the main content, and some content has their own z-index > 1
        width: 100%;
        height: 100%;
        pointer-events: none;
        content: '';
        opacity: 0;
        transition: opacity 200ms ease;
    }

    .ScrollableShadows__inner {
        flex: 1;
    }

    &.ScrollableShadows--horizontal {
        height: 100%;

        .ScrollableShadows__inner {
            overflow-x: auto;
        }

        &::before {
            box-shadow: 16px 0 16px -16px rgb(0 0 0 / 25%) inset;
        }

        &::after {
            box-shadow: -16px 0 16px -16px rgb(0 0 0 / 25%) inset;
        }

        [theme='dark'] & {
            &::before {
                box-shadow: 16px 0 16px -16px rgb(0 0 0 / 100%) inset;
            }

            &::after {
                box-shadow: -16px 0 16px -16px rgb(0 0 0 / 100%) inset;
            }
        }
    }

    &.ScrollableShadows--vertical {
        width: 100%;

        .ScrollableShadows__inner {
            overflow-y: auto;
        }

        &::before {
            box-shadow: 0 16px 16px -16px rgb(0 0 0 / 25%) inset;
        }

        &::after {
            box-shadow: 0 -16px 16px -16px rgb(0 0 0 / 25%) inset;
        }

        [theme='dark'] & {
            &::before {
                box-shadow: 0 16px 16px -16px rgb(0 0 0 / 100%) inset;
            }

            &::after {
                box-shadow: 0 -16px 16px -16px rgb(0 0 0 / 100%) inset;
            }
        }
    }

    &.ScrollableShadows--right::after,
    &.ScrollableShadows--left::before,
    &.ScrollableShadows--bottom::after,
    &.ScrollableShadows--top::before {
        opacity: 1;
    }

    &.ScrollableShadows--hide-scrollbars {
        .ScrollableShadows__inner {
            /* Hide the scrollbar */
            scrollbar-width: none;

            &::-webkit-scrollbar {
                display: none;
            }
        }
    }
}
